<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/foreHeader::html('课程明细')">
</head>
<script src="webjars/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>


<body>
<div id="workingArea" class="container-fluid">
    <!--导航栏-->
    <div th:replace="include/fore/foreNavigator::html"></div>

    <div class="col-md-12 " th:replace="include/fore/foreNav2::html"></div>


    <div class="col-md-12">
        <h1 class="text-center">{{category.name}}</h1>
        <div style="height: 50px;"></div>
        <div class="col-md-6 text-center" v-for="bean in beans" style="height: 300px">
            <h3>{{bean.name}}</h3>
            <p>{{bean.description}}</p>
        </div>
    </div>

    <div th:replace="include/fore/foreFoot::html"></div>
</div>
</body>

<script>
    $(function () {

        var cid = getUrlParms("cid");

        var data4Vue = {
            uri: "subclass",
            beans: [],
            bean: "",
            category:""
        };

        var vue = new Vue({
            el: "#workingArea",
            data: data4Vue,
            mounted: function () {
                this.getCategory();
                this.list();
            },
            methods: {
                getCategory:function () {
                    var url="category/"+cid;
                    axios.get(url).then(function (res) {
                        vue.category=res.data.data;
                    })
                },
                list: function () {
                    var url = "category/" + cid + "/" + this.uri;
                    axios.get(url).then(function (res) {
                        vue.beans = res.data.data.content;
                        console.log(vue.beans);
                    })
                }
            }
        })
    })
</script>
</html>